<template>
    <div class="product">
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <router-link v-if="item.type==1" :to="'/product/detail/'+ item.id">{{item.name}}</router-link>
                <router-link v-if="item.type==2" :to="{name:'product_detail',params:{id:item.id}}">{{item.name}}</router-link>
                <router-link v-if="item.type==4" :to="{name:'product_detail',query:{id:item.id}}">{{item.name}}</router-link>
                <a v-if="item.type==3" href="javascript:void(0)" @click="jump(item.id)">{{item.name}}</a>
            </li>
            <li></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    type: 1,
                    name: 'path跳转'
                },
                {
                    id: 2,
                    type: 2,
                    name: 'name跳转'
                },
                {
                    id: 3,
                    type: 3,
                    name: 'push跳转'
                },
                {
                    id: 4,
                    type: 4,
                    name: 'query传参'
                },
            ]
        }
    },
    methods: {
        jump(id) {
            this.$router.push({
                name: 'product_detail',
                params: {
                    id: id
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.product{
}
</style>